<script setup lang="ts">
import {
    NButton, NModal, NFlex, NMention,
    NForm, NFormItem, NInput, NRadioGroup, NRadio
    , type FormInst, type MentionOption
} from 'naive-ui';

import { useFeature } from "~/common/mixins/";
import { type ResourceBelong } from '@/apis/models';
import { useMessage } from "naive-ui";
import { reactive, ref } from 'vue';
import { useBelongStore, useUserStore } from "@/store";

let belong = useBelongStore();
let { UpdateOne, LoadList } = useFeature();

let message = useMessage();
let ruleFormRef = ref<FormInst>();
let emits = defineEmits(["handleQuery"])

let state = reactive({
    ruleForm: {} as ResourceBelong,
    showModal: false
})

let mentions = ref<MentionOption[]>();

let labelWidth = ref(100)
let formRules = ref({
    fdName: {
        required: true,
        message: "请输入区域名称",
        trigger: "change"
    },
    fdManager: {
        required: true,
        message: "请输入管理员",
        trigger: "blur"
    }
})


let onSubmit = (e: MouseEvent) => {
    e.preventDefault()
    ruleFormRef.value?.validate((errors) => {
        if (!errors) {
            let f = state.ruleForm;

            let name = f.fdManagerName.substring(1).trim();
            f.fdManagerName = name;
            f.fdManager = mentions.value?.map(it => {
                if (it.value == name) {
                    return it.id;
                }
            })[0] + ""

            UpdateOne(belong, f).then((res: any) => {
                if (res.code == 200) {
                    message.success("数据修改成功");
                    state.showModal = false;
                    closeDialog();
                }
            })
        }
        else {
            console.log(errors)
        }
    })
}

function openDialog(row: any) {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.showModal = true;
}

let closeDialog = () => {
    emits('handleQuery');
    state.showModal = false;
}

let handleManager = (pattern: string, prefix: string) => {
    if (prefix == '@') {
        let userStore = useUserStore();
        LoadList(userStore, {
            'ne_fdUsername': 'admin',
            'like_fdFullname': pattern
        }).then((res: any) => {
            mentions.value = [];
            for (let i = 0; i < res.length; i++) {
                let r = res[i];
                mentions.value.push({
                    label: r.fdFullname,
                    value: r.fdFullname,
                    id: r.fdId
                })
            }
        })
    }

}

defineExpose({ openDialog });
</script>

<template>
    <div class="mc_1">
        <n-modal content-style="padding:10px;" style="width:38%;" title="资源归属" :show-icon="false" :bordered="true"
            v-model:show="state.showModal" preset="dialog">

            <template #default>
                <n-form ref="ruleFormRef" :rules="formRules" :model="state.ruleForm" :label-width="labelWidth"
                    require-mark-placement="left" label-placement="left" label-align="right">
                    <n-form-item path="fdName" label="门店名称">
                        <n-input v-model:value="state.ruleForm.fdName" placeholder="请输入门店名称" />
                    </n-form-item>
                    <n-form-item :show-require-mark="true" path="fdManagerName" label="门店经理">
                        <n-mention :options="mentions" @search="handleManager"
                            v-model:value="state.ruleForm.fdManagerName" placeholder="请输入门店经理" />
                    </n-form-item>
                    <n-form-item label="数据状态">
                        <n-radio-group name="radiogroup" v-model:value="state.ruleForm.fdStatus">
                            <n-space>
                                <n-radio :value="1" key="1">
                                    启用
                                </n-radio>
                                <n-radio :value="0" key="0">
                                    禁用
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item>
                        <n-flex style="width:fit-content;position:absolute;right:0;">
                            <n-button type="primary" @click="onSubmit">确定</n-button>
                            <n-button @click="state.showModal = false">取消</n-button>
                        </n-flex>
                    </n-form-item>
                </n-form>
            </template>
        </n-modal>
    </div>

</template>

<style scoped>
.toolbar {
    padding: 10px 0 10px 10px;

    .n-button:first-child {
        margin-right: 10px;
    }
}
</style>
